<template>
  <div>
    <el-tabs v-model="activeNames" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in tabsList"
        :key="index"
        :label="item.name"
        :name="String(item.name)"
        :data-id="item.component"
        lazy
      >
        <component :is="item.component" :person-id="personId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import BasicInfos from '@/views/talentPerson/info/sub/pages/basicInfos.vue'
import Project from '@/views/talentPerson/info/sub/pages/project.vue'
import Certificate from '@/views/talentPerson/info/sub/pages/certificate.vue'

export default {
  name: 'SubNavTabs',
  components: { BasicInfos, Project, Certificate },
  props: {
    tabsList: { type: Array, default: null },
    activeName: { type: String, default: '' },
    personId: { type: String, default: '' }
  },
  data() {
    return {
      activeNames: '' // 新的字段接收
    }
  },
  watch: {
    'activeName': {
      immediate: true,
      handler(newVal, oldValue) {
        this.activeNames = newVal
      }
    }
  },
  methods: {
    handleClick(tab) {
      this.activeNames = tab.name
    }
  }
}
</script>
<style scoped>
::v-deep .el-tabs__item {
  /*height: 50px;*/
  /*line-height: 50px;*/
  font-size: 15px;
}

::v-deep .el-tabs--card > .el-tabs__header {
  background-color: #FAFBFD;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
  border-top: 2px solid;
}

::v-deep .el-tabs__nav-wrap {
  margin-bottom: -3px;
}
</style>
